<template>
  <div @mousedown="HandledragStart" :class="'resizer ' + resizeType" draggable="true"></div>
</template>

<script>
export default {
  inject: ["app"],
  name: "resizeBar",
  props: {
    resizeType: {
      type: String,
      default: "x",
    },
  },
  data() {
    return {
      resizer: {
        moving: false,
        x: 0,
        y: 0,
      },
      style: "height:90%;width:5px;float:left;",
    };
  },
  created() {
    this.mouseUpListener = document.addEventListener(
      "mouseup",
      this.HandledragEnd.bind(this)
    );
    this.mouseMoveListener = document.addEventListener(
      "mousemove",
      this.Handledrag.bind(this)
    );
    this.app.$on("root-mousemove", this.resizerMouseMove);
    this.app.$on("root-mouseup", this.resizerMouseUp);
  },
  beforeDestroy() {
    document.removeEventListener("mouseup", this.HandledragEnd);
    document.removeEventListener("mousemove", this.Handledrag);
  },
  // watch:{
  //   resizeType:{
  //     immediate:true,
  //     handlder:function(val){
  //       if(val=='x'){
  //         this.style='height:100%;width:5px;float:left;'
  //       }else if(val=='y'){
  //         this.style='width:100%;height:5px;float:left;'
  //       }
  //     }
  //   }
  // },
  methods: {
    HandledragStart(event) {
      if (!this.resizer.moving) {
        this.resizer.moving = event.srcElement;
        this.resizer.x = event.x;
        this.resizer.y = event.y;
      }
    },
    Handledrag(event) {
      if (this.resizer.moving && event) {
        let parentW = Number(window.getComputedStyle(this.resizer.moving.parentElement).width.replace('px',''));
        let parentH = Number(window.getComputedStyle(this.resizer.moving.parentElement).height.replace('px',''));
        console.log(parentW)
        if (this.resizeType == "x") {
          const minWidth = window.getComputedStyle(this.resizer.moving.nextElementSibling).minWidth
            // this.resizer.moving.nextElementSibling.style.minWidth;
          const maxWidth = window.getComputedStyle(this.resizer.moving.nextElementSibling).maxWidth;
            // this.resizer.moving.nextElementSibling.style.maxWidth;
          // console.log(minWidth,maxWidth)
          let nw = this.resizer.moving.nextElementSibling.offsetWidth;
          let nwPercent = ((nw - event.x + this.resizer.x) * 100) / parentW;
          if (minWidth) {
            nwPercent =
              Math.floor(nwPercent) <= Number(minWidth.replace("%", ""))
                ? Number(minWidth.replace("%", "")) + 1
                : nwPercent;
          }
          if (maxWidth) {
            nwPercent =
              Math.ceil(nwPercent) >= Number(maxWidth.replace("%", ""))
                ? Number(maxWidth.replace("%", ""))
                : nwPercent;
          }
          this.resizer.moving.nextElementSibling.style.width =
            String(nwPercent) + "%";

          this.resizer.moving.previousElementSibling.style.width =
            "calc( " + String(100 - nwPercent) + "% - 6px)";
        } else {
          let nh = this.resizer.moving.nextElementSibling.offsetHeight + 3;
          let nhPercent = ((nh - event.y + this.resizer.y) * 100) / parentH;
          this.resizer.moving.nextElementSibling.style.height =
            "calc( " + String(nhPercent) + "%";
          this.resizer.moving.previousElementSibling.style.height =
            "calc( " + String(100 - nhPercent) + "% - 6px)";
        }
        this.resizer.x = event.x;
        this.resizer.y = event.y;
      }
    },
    HandledragEnd() {
      if (this.resizer.moving) {
        this.resizer.moving = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.resizer {
  cursor: ew-resize;
  background: rgba(0,0,0,0);
}
.x {
  height: 90%;
  width: 4px;
  float: left;
  // margin: 0 3px;
}
.y {
  cursor: ns-resize;
  width: 90%;
  height: 4px;
  float: left;
  // margin: 3px 0;
}
</style>
